<template>
  <div style="border: 1px solid black; width: 90%; margin: 0 auto">
    <p class="ys">上传头像</p>
    <div>
      <el-upload
          class="avatar-uploader"
          action=""
      	 :auto-upload="false"
      	list-type="picture-card"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      	:http-request="upload"
      	 :limit='1'
      	  :on-remove="handleRemove"
      	   :on-change="handleChange"
      	
        >
          <img v-if="imageUrl" :src="imageUrl" />
      
         <aside>点击此处选择头像图片</aside> 
        </el-upload>
		<el-button @click="upload()">上传</el-button>
    </div>
    <p class="ys">
		修改密码
		<el-input v-model="pwd" />
		<el-button @click="mima()">确定</el-button>
	</p>
    <p class="ys">
		修改名称 电话
		<el-input v-model="nickname" />
		<el-input v-model="phone" />
		<el-button @click="namephone()">确定</el-button>
	</p>
  </div>
</template>

<script>
// 拦截器
import instance from "../../ajax/index.js";

import { Plus } from "@element-plus/icons-vue";
export default {
  name: "Personal",
  components: {
    Plus,
  },
  data() {
    return {
      imageUrl: "",
	  // 新密码
	  pwd:'',
	  // 新名称
	  nickname:'',
	  // 新电话
	  phone:'',
	  // 图片
	  file:'',
    };
  },
  created() {
  	console.log(this.$store.state.img);
  },
  methods: {
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("Avatar picture must be JPG format!");
      }
      if (!isLt2M) {
        this.$message.error("Avatar picture size can not exceed 2MB!");
      }
      return isJPG && isLt2M;
    },
	mima(){
		if(this.pwd!=''&&this.pwd.length>=5){
			let fd = new FormData();
			fd.append('pwd',this.pwd);
			
			instance
			.post("/api/fore/user/updatePwd",fd)
			.then((res) => {
				console.log(res);
			})
			.catch((error) => {
			  console.log(error);
			});
		}
	},
	namephone(){
		if(this.phone!=''&&this.phone.length>=5){
			let fd = new FormData();
			fd.append('nickname',this.nickname);
			fd.append('phone',this.phone);
			console.log(fd);
			instance
			.post("/api/fore/user/updateInfo",fd)
			.then((res) => {
				console.log(res);
			})
			.catch((error) => {
			  console.log(error);
			});
		}
	},
	// 上传图片
	  upload(){
		  const formData = new FormData();
		  formData.append('img',this.file.raw);
		  // consol.log(this.file.raw.File);
		instance.post('/api/fore/user/updateImg',formData,{ headers: {'Content-Type': 'multipart/form-data'}}).then((res)=>{
			// console.log(res.data.data);
			this.$store.state.img = res.data.data;
			console.log(this.$store.state.img);
			// this.change
		  }).catch((error)=>{
			  console.log(error)
		  })
		  
	  },
	handleAvatarSuccess(res, file) {
	  this.imageUrl = URL.createObjectURL(file.raw)
	},
	handleRemove(file,fileList) {
	      //imgDelete.post({pic_name : file.response.pic_name}).then();
	  this.uploadDisabled = false;
	},
	handleChange(file) {
		this.file = file;
	},
  },
};
</script>

<style scoped>
.ys {
  border-left: 3px solid #67c23a;
  line-height: 70px;
  text-indent: 1.5em;
  background-color: #ebeef5;
  color: #888888;
  font-size: 16px;
  font-weight: bold;
}
/* 上传图片 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 74px; /* (178px - 28px) / 2 - 1px */
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
